import { defineComponent, watch, shallowReactive,ref } from 'vue'
import * as echarts from 'echarts'

// 声明类型
const PropsType = {
  tips: {
    type: Number,
    default: 50,
    require: true
  },
  colorObj: {
    type: Object,
    default: () => ({
      textStyle: "#fff",
      series: {
        color: ["#00bcd44a", "transparent"],
        dataColor: {
          normal: "#03a9f4",
          shadowColor: "#97e2f5"
        }
      }
    })
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    const chartRef = ref()
    // 配置项
    let options = shallowReactive({xAxis:null,series:null,color:null,yAxis:null,legend:null,})

    watch(
      () => props.tips,
      (val: any) => {
        options = {
            legend: {
                data: ['今年','去年']
              },
            xAxis: {
                type: 'category',
                data: ['01','02','03','04','05','06','07',]
              },
              color:['rgba(49, 127, 245, 1)','rgba(49, 219, 245, 1)'],
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [150, 230, 224, 218, 135, 147, 260],
                  type: 'line',
                  name:'今年'
                },
                {
                    data: [50, 210, 124, 118, 235, 147, 160],
                    type: 'line',
                    name:'去年'
                  }
              ]
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "310px"
      const width = "830px"

      return <div>
        <echart ref={chartRef} class="mr-auto" options={options} height={height} width={width} />
      </div>
    }
  }
})

